<template>
  <div class="wrap">
    <div class="inner">
      <div class="section">
        <div class="page-table-ctx-wrap">
          <div class="actions-box">
            <!-- 控制器 -->
            <div class="control-box">
              <div class="control-left">
                <div class="control-item" v-for="(item, index) in utilForAddSortFilter" :key="index">
                  <template v-if="item.tag == 'btn'">
                    <el-button :type="item.type">
                      {{ item.title }}
                      <i
                        v-if="item.right_arrow"
                        class="el-icon-arrow-down el-icon--right"
                      ></i>
                    </el-button>
                  </template>
                  <template v-else-if="item.tag == 'dropdown'">
                    <el-dropdown @command="handleCommand">
                      <el-button :type="item.type">
                        {{ item.title }}
                        <i
                          v-if="item.right_arrow"
                          class="el-icon-arrow-down el-icon--right"
                        ></i>
                      </el-button>

                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="(sub, sindex) in item.child"
                          :key="sindex"
                          :command="sub.title"
                          >{{ sub.title }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </div>
              </div>
              <div class="control-right" v-if="showUtillSearch">
                <div class="search-box">
                  <el-input placeholder="请输入关键词" v-model="keyword">
                    <el-button
                      slot="append"
                      size="small"
                      icon="el-icon-search"
                      @click="handleSearch"
                    >
                    </el-button>
                  </el-input>
                </div>

                <el-button type="primary" class="btn" @click="show_filter = !show_filter"
                  >筛选
                </el-button>
              </div>
            </div>
            <!-- 控制器 -->

            <!-- 筛选器 -->
            <div class="filter-box" v-if="show_filter">
              <el-form ref="form" :inline="true" :model="form" label-width="80px">
                <el-form-item label="所属分类">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="资讯标题">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">筛选</el-button>
                  <el-button>重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 渲染表格 -->
          <div class="table-view">
            <el-table
              :data="tableData"
              style="width: 100%"
              stripe
              border
              @sort-change="handleSortChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="expand" label="展开">
                <template slot-scope="props">
                  <el-form label-position="left" class="demo-table-expand">
                    <el-form-item label="商品名称">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                      <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="商品 ID">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="店铺 ID">
                      <span>{{ props.row.shopId }}</span>
                    </el-form-item>
                    <el-form-item label="商品分类">
                      <span>{{ props.row.category }}</span>
                    </el-form-item>
                    <el-form-item label="店铺地址">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="商品描述">
                      <span>{{ props.row.desc }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>

              <el-table-column prop="id" label="表头1" width="auto" sortable="custom">
              </el-table-column>
              <el-table-column prop="name" label="表头2" width="auto"> </el-table-column>
              <el-table-column
                prop="desc"
                label="表头3"
                width="auto"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
          </div>
          <!-- 渲染表格 -->

          <div class="table-util">
            <div class="util-left">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >当页全选</el-checkbox
              >

              <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
              >当页全选</el-button
            > -->
              <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
              <span class="checked-count"> 已选10项 </span>

              <!-- 工具栏 -->
              <div class="util-items">
                <div class="item" v-for="(item, index) in utilForPublish" :key="index">
                  <template v-if="item.tag == 'btn'">
                    <el-button :type="item.type">
                      {{ item.title }}
                      <i
                        v-if="item.right_arrow"
                        class="el-icon-arrow-down el-icon--right"
                      ></i>
                    </el-button>
                  </template>
                  <template v-else-if="item.tag == 'dropdown'">
                    <el-dropdown @command="handleUtilCommand">
                      <el-button :type="item.type">
                        {{ item.title }}
                        <i
                          v-if="item.right_arrow"
                          class="el-icon-arrow-down el-icon--right"
                        ></i>
                      </el-button>

                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="(sub, sindex) in item.child"
                          :key="sindex"
                          :command="sub.title"
                          >{{ sub.title }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </div>
              </div>
              <!-- 工具栏 -->
            </div>
            <div class="util-right">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="100"
                layout="total, sizes, prev, slot, next, jumper"
                :total="400"
                :pager-count="5"
              >
                <span class="cus-current-page">
                  <span> 1/N </span>
                </span>
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "news",
  components: {},
  data() {
    return {
      keyword: "",
      utilForAddSortFilter: [
        { tag: "btn", title: "添加", type: "primary" },
        { tag: "btn", title: "分类管理" },
        {
          tag: "dropdown",
          title: "更多操作",
          right_arrow: 1,
          child: [
            { title: "自定义列显示" },
            { title: "自定义筛选" },
            { title: "导入" },
            { title: "导出" },
            { title: "回收站" },
          ],
        },
        { tag: "btn", title: "列表排序" },
      ],

  

      isIndeterminate: false,
      checkAll: false,
      utilForPublish: [
        {
          tag: "dropdown",
          title: "发布",
          right_arrow: 1,
          child: [{ title: "立即发布" }, { title: "撤销发布" }],
        },
        {
          tag: "dropdown",
          title: "定时任务",
          right_arrow: 1,
          child: [
            { title: "定时发布" },
            { title: "定时撤销" },
            { title: "取消定时发布" },
            { title: "取消定时撤销" },
          ],
        },
        {
          tag: "dropdown",
          title: "指定",
          right_arrow: 1,
          child: [{ title: "置顶" }, { title: "取消置顶" }],
        },
        {
          tag: "dropdown",
          title: "状态",
          right_arrow: 1,
          child: [{ title: "显示" }, { title: "隐藏" }],
        },
        {
          tag: "btn",
          title: "转移",
        },
        {
          tag: "btn",
          title: "删除",
        },
      ],

      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc:
            "淡奶，奶香浓而不腻荷兰优质淡奶，奶香浓而不腻荷兰优质淡奶，奶香浓而不腻 淡奶，奶香浓而不腻荷兰优质淡奶，奶香浓而不腻荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987125",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
      ],

      show_filter: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },

      currentPage4: 4,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.setView();
  },
  mounted() {},
  methods: {
    setView() {
      // this.$api("setting", {}).then((res) => {});

      this.$api({
        url: "news/information/list",
        method: "get",
        data: {
          pageNums: 1,
          pageSize: 10,
        },
      }).then((res) => {
        if (res.code == 200) {
        }
      });
    },

    handleSearch() {},

    handleSortChange({ column, prop, order }) {
      //'ascending' 升序
      //'descending' 降序
      console.log(" column, prop, order");
      console.log(column, prop, order);
    },

    // 工具栏全选
    handleCheckAllChange(val) {
      this.isIndeterminate = false;
    },
    // 工具栏全选

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //分页

    // 下拉选
    handleCommand(command) {
      console.log("下拉选", command);
    },
    // 下拉选
    handleUtilCommand(command) {
      console.log("下拉选", command);
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-table table {
  width: 100% !important;

  thead {
    th.el-table__cell {
      background: #f8f8f8;
      color: #000;
      // font-weight: bold;
    }
  }
}

.inner {
  padding: 0;
  text-align: left;

  .section {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
  }
}

// 新增
.control-box {
  .flex-between();

  .control-left {
    .flex();
    .control-item {
      margin-right: 10px;
    }
  }
  .control-right {
    .flex();
    .search-box {
      margin-right: 10px;
    }
  }
}

.table-view {
  margin-top: 20px;
  margin-bottom: 20px;
}

.filter-box {
  margin-top: 20px;
  padding: 20px;
  padding-bottom: 0;
  background: rgb(248, 249, 250);
}

// 表格工具栏
.table-util {
  .flex-between();

  .util-left {
    .flex();
    .util-items {
      .flex();
      .item {
        margin-right: 10px;
      }
    }
  }
  .util-right {
  }
}

.cus-current-page {
  text-align: center;
}

.checked-count {
  margin-left: 20px;
  margin-right: 20px;
}
</style>
